<template>
  <div>
    <el-dialog
      title="订单状态"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      @close="closeDiog"
      width="70%"
    >
      <div class="order-state">
        <div class="state-box"></div>
        <div class="state-steps">
          <el-steps :active="4" align-center>
            <el-step
              title="提交订单"
              description="这是一段很长很长很长的描述性文字"
            ></el-step>
            <el-step title="支付订单" description="未支付"></el-step>
            <el-step
              title="取消订单"
              description="这是一段很长很长很长的描述性文字"
            ></el-step>
            <el-step
              title="已完成"
              description="这是一段很长很长很长的描述性文字"
            ></el-step>
          </el-steps>
        </div>
      </div>
      <div class="current">
        <div>当前订单状态：待付款</div>
      </div>
      <div class="extent">基本信息</div>
      <el-table
        :data="dataList.list"
        border
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="blockchain" label="订单编号" width="200" />
        <el-table-column prop="denomName" label="用户账号" width="200" />
        <el-table-column prop="dawName" label="用户昵称" width="200" />
        <el-table-column prop="denomId" label="订单来源" width="200" />
        <el-table-column prop="denomId" label="支付状态" width="200" />
        <el-table-column prop="denomId" label="支付方式" width="200" />
      </el-table>
      <div class="extent" style="margin-top: 20px">充值信息</div>
      <el-table
        :data="rechargeList.list"
        border
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="blockchain" label="订单编号" width="200" />
        <el-table-column prop="denomName" label="用户账号" width="200" />
        <el-table-column prop="dawName" label="用户昵称" width="200" />
        <el-table-column prop="denomId" label="订单来源" width="200" />
        <el-table-column prop="denomId" label="支付状态" width="200" />
        <el-table-column prop="denomId" label="支付方式" width="200" />
      </el-table>
      <div class="extent" style="margin-top: 20px">操作信息</div>
      <el-table
        :data="operationList.list"
        border
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="blockchain" label="订单编号" width="200" />
        <el-table-column prop="denomName" label="用户账号" width="200" />
        <el-table-column prop="dawName" label="用户昵称" width="200" />
        <el-table-column prop="denomId" label="订单来源" width="200" />
        <el-table-column prop="denomId" label="支付状态" width="200" />
        <el-table-column prop="denomId" label="支付方式" width="200" />
      </el-table>
    </el-dialog>
  </div>
</template>
  <script>
export default {
  props: ["itemInOf"],

  data() {
    return {
      dataList: [],
      dialogTableVisible: false,
      rechargeList: [],
      operationList: [],
      dawInfo: {
        dawNameId: "",
        count: "",
        dawName: "",
        denomName: "",
      },

      stepsStatus: 1,
      // 查询的参数
      pageQuery: {
        pageSize: 10,
        pageNum: 1,
        dawName: "",
      },
      dataForm: {},
      //返回的参数
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },

      toViewShow: false,
      castingShow: false,
      // castingManyShow: false,
      addOrUpdateVisible: false,
      destructionShow: false,
    };
  },
  computed: {
    // stepsStatus: function () {
    //   if (this.dataForm.finallyTime) {
    //     return 4
    //   }
    //   if (this.dataForm.dvyTime) {
    //     return 3
    //   }
    //   if (this.dataForm.payTime) {
    //     return 2
    //   }
    //   if (this.dataForm.createTime) {
    //     return 1
    //   }
    // }
  },

  methods: {
    //关闭铸币申请弹窗
    closeDiog() {
      this.fileList = [];
    },
    init() {
      this.dialogTableVisible = true;
      this.$nextTick(() => {});
    },
    openApplyCoinage() {},
  },
};
</script>
  <style>
/* 去掉全选按钮 */
.el-table .disabledCheck .cell .el-checkbox__inner {
  display: none !important;
}

.el-table .disabledCheck .cell::before {
  content: "选择";
  text-align: center;
  line-height: 10px;
}
.block {
  margin-top: 30px;
}
.head {
  display: flex;
}
.right {
  width: 700px;
  height: 140px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 50px;
}
.hight {
  width: 400px;
  height: 140px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 110px;
}
.dams {
  width: 400px;
}
.extent {
  width: 100%;
  height: 50px;
  background-color: #d7d7d7;
  line-height: 50px;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 0 20px;
}
.current {
  width: 100%;
  height: 70px;
  background-color: #fff;
  line-height: 70px;
  font-size: 16px;
  padding: 0 20px;
  color: red;
  border: 1px solid #000;
}
</style>
  